<template>
	<view class="content">
		<view class="view1">
			<view style="height: 100upx; width: 100%;text-align: center;padding-top: 40upx;">
				<image src="../../static/img/common/logo.jpg" style="width: 120upx;height: 120upx;border-radius: 100upx;"></image>
				<view style="font-size: 14px;color: #999999;margin-top: 10upx;">{{ nickName }}</view>
			</view>
			<view style="display: flex;flex-direction: row;padding-top: 60upx;">
				<view class="userImage_buttom_view">
					<view class="userImage_buttom_view_text">{{ money }}</view>
					<view class="userImage_buttom_view_text2">邀请收益</view>
				</view>
				<view class="userImage_buttom_view">
					<view class="userImage_buttom_view_text">{{ zhishuMoney }}</view>
					<view class="userImage_buttom_view_text2">直属收益</view>
				</view>
				<view class="userImage_buttom_view">
					<view class="userImage_buttom_view_text">{{ feizhishuMoney }}</view>
					<view class="userImage_buttom_view_text2">非直属收益</view>
				</view>
			</view>
		</view>

		<view class="view2">
			<view style="font-size: 19px;color: #333333;padding: 30upx;">收益明细</view>

			<view style="width: 90%;height: 80upx;background-color: #F8F8F8;display: flex;justify-content: space-between;line-height: 80upx;text-align: center;margin:20upx auto">
				<view class="zhushubox" :style="	index == 0	? ' background:#CFAB71;;width:50%;border-radius: 10px 0px 0px 10px;color:#fff'	: 'border-radius: 10px 0px 0px 10px;background:#F5F5F5;width:50%;border-radius:0px 10px 10px 0px;'	"
				 @tap="yaoqing(0)">邀请收益</view>
				<view class="zhushubox" :style="	index == 1	? ' background:#CFAB71;;width:50%;color:#fff'	: 'background:#F5F5F5;width:50%;'	"
				 @tap="zhishu(1)">直属收益</view>
				<view class="zhushubox" :style="	index == 2	? ' background:#CFAB71;;width:50%;border-radius:  0 10px 10px 0;color:#fff'	: 'background:#F5F5F5;;width:50%;border-radius:  0 10px 10px 0; border-radius: 0px 10px 10px 0px;'	"
				 @tap="tuan(2)">非直属收益</view>
			</view>
			<view>

				<view style="display: flex;flex-direction: row;padding: 20upx;margin-left: 40upx;" v-for="(item, index) in list" :key="index">
					<view style="margin-top: 5upx;">{{index + 1}}</view>
					<image :src="item.imageUrl" style="border-radius: 100upx;width: 50upx; height: 50upx;margin-left: 20upx;"></image>
					<view style="font-size: 16px;color: #333333;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 50%;margin-left: 20upx;margin-top: 5upx;">{{item.nickName}}</view>

					<view style="margin-left: 10upx;width: 25%;text-align: right;margin-top: 10upx;">
						<view style="font-size: 30upx;color: #FF332F;">¥ {{item.money}}</view>
					</view>
				</view>
			</view>
			<view class="scroll_top" @tap="topScrollTap" v-bind:class="[scrollTop ? 'active' : '', '']" style="bottom: 56px;"><text
				 class="iconfont icon-shangla"></text></view>

			<view class="s-col is-col-24" style="margin-top: 40upx;" v-if="list.length > 0">
				<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				list: [],
				cashOut: 0,
				index: 0,
				nickName: '',
				money: 0,
				zhishuMoney: '0',
				feizhishuMoney: '0',
				zhishuCount: 0,
				feizhishuCount: 0,
				moneySum: 0,
				page: 1,
				size: 10,
				loadingType: 0,
				scrollTop: false,
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}
			};
		},
		onLoad() {
			this.getList('');
			let userId = this.$queue.getData('userId');
			if (userId) {
				this.getUserMoney(userId);
			}
			let image_url = this.$queue.getData('image_url');
			let nickName = this.$queue.getData('nickName');
			if (image_url && image_url !== 'undefined') {
				this.image_url = image_url;
			} else {
				this.image_url = '/static/img/common/logo.jpg';
			}

			if (nickName && nickName !== 'undefined') {
				this.nickName = nickName;
			} else {
				this.image_url = '游客';
			}
		},
		methods: {
			yaoqing(nub) {
				this.index = nub
				this.page = 1;
				this.getList('');
			},
			zhishu(nub) {
				this.index = nub
				this.page = 1;
				this.getZhiByUserList('');
			},
			tuan(nub) {
				this.index = nub
				this.page = 1;
				this.getFeiZhiByUserList('');
			},
			getZhiByUserList(type) {
				this.loadingType = 1;
				uni.showLoading({
					title: '加载中...'
				});
				let userId = this.$queue.getData('userId');
				let data = {
					page: this.page,
					limit: this.size,
					userId: userId
				};
				this.$Request.getT('/invite/selectZhiInviteByUserIdList', data).then(res => {
					if (res.code === 0) {
						if (this.page === 1) {
							this.list = [];
						}
						res.data.records.forEach(d => {
							this.list.push(d);
						});
						if (this.size === res.data.total) {
							this.loadingType = 0;
						} else {
							this.loadingType = 3;
						}
					} else {
						this.loadingType = 2;
					}
					uni.hideLoading();
					if (type === 'Refresh') {
						uni.stopPullDownRefresh(); // 停止刷新
					}
				});
			},
			getFeiZhiByUserList(type) {
				this.loadingType = 1;
				uni.showLoading({
					title: '加载中...'
				});
				let userId = this.$queue.getData('userId');
				let data = {
					page: this.page,
					limit: this.size,
					userId: userId
				};
				this.$Request.getT('/invite/selectFeiInviteByUserIdList', data).then(res => {
					if (res.code === 0) {
						if (this.page === 1) {
							this.list = [];
						}

						res.data.records.forEach(d => {
							this.list.push(d);
						});
						if (this.size === res.data.total) {
							this.loadingType = 0;
						} else {
							this.loadingType = 3;
						}
					} else {
						this.loadingType = 2;
					}
					uni.hideLoading();
					if (type === 'Refresh') {
						uni.stopPullDownRefresh(); // 停止刷新
					}
				});
			},
			getUserMoney(userId) {
				this.$Request.getT('/invite/selectZhiFeiMoney?userId=' + userId).then(res => {
					if (res.code === 0) {
						this.zhishuMoney = res.data.zhiUserInviteMoney;
						this.feizhishuMoney = res.data.feiUserInviteMoney;
						this.zhishuCount = res.data.zhiUserInviteCount;
						this.feizhishuCount = res.data.feiUserInviteCount;
					}
				});
			},
			goCash() {
				uni.navigateTo({
					url: '../member/cash'
				});
			},
			getList(type) {
				this.loadingType = 1;
				uni.showLoading({
					title: '加载中...'
				});
				let userId = this.$queue.getData('userId');
				let data = {
					page: this.page,
					limit: this.size,
					userId: userId
				};

				this.$Request.getT('/invite/selectInviteByUserIdList', data).then(res => {
					if (res.code === 0) {
						if (this.page === 1) {
							this.list = [];
						}
						this.cashOut = res.data.inviteMoney.cashOut;
						this.money = res.data.inviteMoney.money;
						this.moneySum = res.data.inviteMoney.moneySum;

						res.data.pageUtils.list.forEach(d => {
							if (!d.imageUrl) {
								d.imageUrl = '/static/img/common/logo.jpg';
							}
							this.list.push(d);
						});
						if (this.size === res.data.pageUtils.list.length) {
							this.loadingType = 0;
						} else {
							this.loadingType = 3;
						}
					} else {
						this.loadingType = 2;
					}
					uni.hideLoading();
					if (type === 'Refresh') {
						uni.stopPullDownRefresh(); // 停止刷新
					}
				});
			},
			topScrollTap: function() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			}
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop > 200;
		},
		onReachBottom: function() {
			this.page = this.page + 1;
			if (this.index === 0) {
				this.getList('');
			} else if (this.index === 1) {
				this.getZhiByUserList('');
			} else if (this.index === 2) {
				this.getFeiZhiByUserList('');
			}
		},
		onPullDownRefresh: function() {
			this.page = 1;
			if (this.index === 0) {
				this.getList('Refresh');
			} else if (this.index === 1) {
				this.getZhiByUserList('Refresh');
			} else if (this.index === 2) {
				this.getFeiZhiByUserList('Refresh');
			}
		}
	};
</script>

<style lang="less" scoped>
	@import '../../static/less/index.less';
	@import '../../static/css/index.css';

	page {
		background: #FFFFFF;
	}

	.zhushubox {
		width: 50%;
		text-align: center;
	}

	.userImage_buttom_view {
		margin: 80upx 0 0 20upx;
		height: 100upx;
		width: 300upx;
		text-align: center;
	}

	.userImage_buttom_view_text {
		font-size: 17px;
		color: #ff580b;
	}

	.userImage_buttom_view_text1 {
		font-size: 14px;
		color: #999999;
		margin-top: 10upx;
	}

	.userImage_buttom_view_text2 {
		font-size: 14px;
		color: #999999;
		margin-top: 15upx;
	}

	.view1 {
		background-color: #ffffff;
		width: 93%;
		height: 400upx;
		margin-left: 26upx;
		border-radius: 20upx;
		margin-top: 20upx;
		box-shadow: rgba(183, 183, 183, 0.3) 1px 1px 10px 1px;
	}

	.view1-view {
		margin: 1.5upx 20upx 0 20upx;
		width: 95%;
		border-radius: 0 0 30upx 30upx;
		height: 150upx;
		background-color: #ffffff;
	}

	.view2 {
		background-color: #ffffff;
		width: 93%;
		height: 100%;
		margin-left: 26upx;
		border-radius: 20upx;
		margin-top: 20upx;
		padding-bottom: 20upx;
	}
</style>
